<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menu_1{
            width: 200px;
            height: 30px;
            background-color: #dcdcdc;
            line-height: 30px;
            text-align: center;
            margin-bottom: 2px;
        }
        ul{
            display: none;
        }
    </style>
    <script src="js/jquery3.7.1.js"></script>
    <script>
        $(()=>{
            //侧边菜单 触发对象 -> 触发事件 -> 触发函数 -> 操作对象
            $(".menu_1").click(function (){
                // $(this).next().toggle()
                let ul = $(this).next();
                if(ul.css("display") === "none")
                    ul.slideDown();
                else
                    ul.slideUp();
            });

            // //显示系统时间
            // (()=>{
            //     //2025年7月21日 10点00分00秒
            //     setInterval(()=>{
            //         let now = new Date();
            //         let year = now.getFullYear();
            //         let month = zero(now.getMonth() + 1); // 月份从0开始
            //         let day = zero(now.getDate());
            //         let hours = zero(now.getHours());
            //         let minutes = zero(now.getMinutes());
            //         let seconds = zero(now.getSeconds());
            //         $("#hello").html('' + year + '年' + month + '月' + day + '日 ' + hours + '时' + minutes + '分' + seconds + '秒');
            //     }, 1000);
            //     let zero = num=> num < 10 ? '0' + num : num;
            // })()
        })
    </script>
</head>
<body>
    <div id="hello"></div>
    <div class="menu_1">系统管理</div>
    <ul>

        <li>用户管理</li>
        <li>角色管理</li>
        <li>菜单管理</li>
        <li>菜单管理</li>
        <li>菜单管理</li>

    </ul>
    <div class="menu_1">商品管理</div>
    <ul>
        <li>用户管理</li>
        <li>角色管理</li>
        <li>菜单管理</li>
        <li>菜单管理</li>
        <li>菜单管理</li>
    </ul>
    <div class="menu_1">订单管理</div>
    <ul>
        <li>用户管理</li>
        <li>角色管理</li>
        <li>菜单管理</li>
        <li>菜单管理</li>
        <li>菜单管理</li>
    </ul>
</body>
</html>
